<template>
	<view class="search">
		<view class="search-head">
			<view class="head-icon__search iconfont icon-remensousuo"></view>
			<view class="head-input__search">
				<input v-model="val" :focus="true" :adjustPosition="false" placeholder="请输入您要搜索的内容" placeholder-class="head-input__placeholder" confirmType="搜索" :confirmHold="false"   @confirm="handleConfirm"/>
				<button @click="handleConfirm">搜索</button>
			</view>
		</view>
		<!-- 历史搜索数据展示 -->
		<view class="hotSearch">
			<view class="hotSearch-head">
				<view class="hotSearch-icon__hot iconfont icon-remensousuo"></view>
				<text class="hotSearch-text__hot">
					 热门搜索
				</text>
			</view>
			<view class="hotSearch-list">
				<view class="hotSearch-li" v-for="(item,index) in hotList" :key="index" @click="handlerItemClick(item)">
					{{item}}
				</view>
			</view>
		</view>
		<!-- 输入框搜索数据结果展示 -->
		<view v-if="showPop">	
			<view class="pop-search__list">
				<view class="pop-search__li" v-for="(item,index) in formatSearchList" :key="index" @click="toWord(item)" >
					<text  >{{item.label}}</text>
					<text style="margin-left: 20rpx;" v-if="item.fanyi">{{item.fanyi}}</text>
				</view>
			</view>
			<view class="pop-search__mask" @click="showPop=false"></view>
		</view>
	</view>
</template>

<script>
	import { getEnglishList } from  '/api/english-static.js'
	import {throttle,toast} from 'luoyu-uni-utils'
	import { translate } from '@/api/translate.js'
	let sarchTimeout = null
	export default {
		watch:{
			searchList:{
				handler(searchList){
					uni.hideLoading();
					console.log('watch',searchList)
					if(searchList.length>0 && this.val){
						this.formatSearchList = searchList
					}
				},
				deep:true
			}
		},
		data() {
			return {
				val:'',
				showPop:false,
				//搜索的数据
				formatSearchList:[],
				/**
				 * hotList：历史搜索数组，
				 * searchList：搜索数组
				 */
				hotList: [],
				searchList:[]
			}
		},
		mounted(){
			
		},
		methods: {
			/**
			 * 点击搜索按钮
			 */
			handleConfirm(){
				// 判断一下是否输入
				if(this.val){
					//显示数据框
					this.showPop = true
					// 显示加载状态
					uni.showLoading({
						title:"加载数据中..."
					})
					// 将搜索单词赋值给searchVal
					let searchVal = this.val
					console.log(searchVal);
					//查询数据
					this.getWordList(searchVal)
				}else{
					toast("未输入内容！")
				}
			
			},
			// 点击历史查询的数据
			handlerItemClick(item){
				let searchVal = val
				searchVal = val.map(({str})=>str).join('')
				//点击搜索历史
				this.getWordList(searchVal)
			},

			// 根据搜索字分割字符
			hilight_word(key, word,item) {
				key=key.trim()
				word=''+ word
			    let idx = word.indexOf(key), t = [];
			    if (idx > -1) {
			      if (idx == 0) {
			        t =this.hilight_word(key, word.substr(key.length),item);
			        t.unshift({ key: true, str: key,...item });
			        return t;
			      }
			 
			      if (idx > 0) {
			        t =this.hilight_word(key, word.substr(idx),item);
			        t.unshift({ key: false, str: word.substring(0, idx),...item });
			        return t;
			      }
			    }
			    return [{ key: false, str: word,...item }];
			},
			// 查询数据
			getWordList(input){
				// 请求后端数据
				getEnglishList(input).then(async (response)=>{
					const rows = response.rows
					const list = []
					for(let i = 0; i < rows.length;i++) {
						const item = rows[i]
						const data =  await translate(item.label).catch(() =>{
							console.log('请求失败');
						})
						item.fanyi = data.result
						list.push(item)
					}
					this.searchList =  list
					uni.hideLoading() // 停止加载状态
				}).catch(error =>{
					uni.hideLoading()
				})
			},
			toWord(item){
				console.log(item);
				uni.setStorageSync("words-query",item)
				uni.navigateTo({
					url:`/pages_search/pages/words`
				})
			}
		}
	}
</script>

<style lang="scss">

.search{
	background-color: #fff;
	overflow: hidden;
	&-head{
		display: flex;
		align-items: center;
		padding:0 10rpx 0 47rpx;
		margin:30rpx 30rpx 0;
		height: 70rpx;
		background: #F5F5F5;
		border-radius: 35rpx;
		.head-icon__search{
			font-size: 30rpx;
			color: #231815;
		}
		.head-input__search{
			display: flex;
			align-items: center;
			flex: 1;
			input{
				margin-left: 15rpx;
				border: none;
				height: 29rpx;
				font-size: 30rpx;
				font-weight: 400;
				color: #AAAAAA;
				line-height: 28rpx;
				flex:1;
			}
			button{
				width: 128rpx;
				height: 53rpx;
				background: linear-gradient(0deg, #0AA0F5, #00E3F2);
				border-radius: 30rpx;
				font-size: 28rpx;
				font-weight: 500;
				color: #FFFFFF;
				line-height: 42rpx;
			}
			.head-input__placeholder{
				color: #AAAAAA;
			}
		}
	}
	.hotSearch{
		margin-top: 30rpx;
		&-head{
			display: flex;
			align-items: center;
			padding:0 0 0 30rpx;
		}
		&-icon__hot{
			margin-left: 10rpx;
			font-size: 30rpx;
			color: rgb(255,43,57);
		}
		&-text__hot{
			margin-left: 10rpx;
			font-size: 30rpx;
			color: #999999;
		}
		&-list{
			padding: 20rpx 0 50rpx 30rpx;
			display: flex;
			flex-wrap: wrap;
		}
		&-li{
			margin: 10rpx 0 0 10rpx;
			padding: 0 20rpx;
			border-radius: 20rpx;
			background: #f2f2f2;
			line-height: 50rpx;
			&:first-child{
				margin-left: 0;
			}
		}
	}
}
.pop{
	&-search{
		&__mask{
			position: fixed;
			top: 100rpx;
			bottom: 0;
			left: 0;
			right: 0;
			background-color: rgba(0, 0,0,.3);
			z-index: 1;
		}
		&__list{
			padding:0 30rpx;
			position: fixed;
			top: 100rpx;
			left: 0;
			right: 0;
			background-color: #fff;
			z-index: 9;
		}
		&__li{
			font-size: 30rpx;
			color: #231815;
			line-height: 90rpx;
			border-bottom: solid 1px #F5F5F5;
			.active{
				color: red;
			}
		}
	}
}
</style>
